<script setup>
import {onMounted, ref} from 'vue'
import {getOrderList, getInProgressList} from "@/api/mobile/order.js"
import PendingItem from "@/components/IndexLeftTabs/pendingItem.vue";
import InProgress from "@/components/IndexLeftTabs/inProgress.vue";
import InProgressByMe from "@/components/IndexLeftTabs/inProgressByMe.vue";
import * as echarts from "echarts";
import {orderStatistics} from "@/api/wxz/echarts.js";

const list = ref({
  pendingList: [],
  inProgressList: []
})
const inProgressList = ref('')


const activeName = ref('1')
const activeName1 = ref('1')

const getList = () => {
  getOrderList().then(res => {
    list.value = res.data
  })
  getInProgressList().then(res => {
    inProgressList.value = res.data
  })
}

getList()
</script>

<template>
  <el-row>
    <el-col :span="11">
      <el-tabs v-model="activeName" class="demo-tabs">
        <el-scrollbar height="720px">
          <el-tab-pane :label="'待维修('+list.pendingList.length +')'" name="1">
            <div v-for="item in list.pendingList" :key="item.id">
              <pending-item :item-value="item" @refresh="getList"/>
            </div>

          </el-tab-pane>
          <el-tab-pane :label="'维修中('+list.inProgressList.length +')'" name="2">
            <div v-for="item in list.inProgressList" :key="item.id">
              <in-progress :item-value="item"/>
            </div>
          </el-tab-pane>
        </el-scrollbar>
      </el-tabs>
    </el-col>
    <el-col :span="1">
      <div>&nbsp;</div>
    </el-col>
    <el-col :span="11">
      <el-tabs v-model="activeName1" class="demo-tabs">
        <el-scrollbar height="720px">
          <el-tab-pane :label="'我的维修单(' + inProgressList.length + ')'" name="1">
            <div v-for="item in inProgressList" :key="item.id">
              <in-progress-by-me :item-value="item" @refresh="getList"/>
            </div>
          </el-tab-pane>
        </el-scrollbar>
      </el-tabs>
    </el-col>
  </el-row>
  <el-row>
    <el-col :span="13">

    </el-col>
  </el-row>
</template>

<style lang="scss">
.demo-tabs {
  border: 1px solid var(--el-border-color);
  border-radius: 5px;

}

.el-tabs__header {
  padding-left: 20px;
  padding-right: 20px;
}

</style>
